<template>
  <div>
    <h2>Count组件</h2>
    <p>count:{{ count }}</p>
    <p>doubleCount:{{ doubleCount }}</p>
    <p>Movie组件的电影列表的总数量:{{ movieList.length }}</p>
    <button @click="increment">累加</button>
    <button @click="incrementN(3)">累加n</button>
    <button @click="asyncIncrementN(3)">两秒后累加n</button>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Count",
});

</script>

<script lang="ts" setup>
// 1- 引入store的hooks方法
import useCountStore from '../../store/count'
import useMovieStore from '../../store/movie'
import {storeToRefs} from "pinia";

// 2- 调用store的hooks方法得到store对象
const countStore = useCountStore()
const movieStore = useMovieStore()

// 3- 解构store对象中的值  storeToRefs方法解构 store对象的值 让其拥有响应式
const {count, doubleCount} = storeToRefs(countStore)
const {movieList} = storeToRefs(movieStore)

// 4- 解构出store对象中的actions方法
const {increment, incrementN, asyncIncrementN} = countStore
</script>

<style scoped>
h2 {
  background-color: skyblue;
}
</style>